<template>
  <div class="main-container container-limited container-fluid page-holder" v-loading="loading">
    <template v-if="Object.keys(curDoc).length">
      <doc-breadcrumb />
      <edit-title :editing.sync="titleEditing" />
      <p class="flex align-items-center">
        <router-link
          :to="`/users/${curDoc.author.id}`"
          class="link el-link--primary flex align-items-center"
        >
          <el-avatar :src="curDoc.author.avatar" class="s22 m-r-5" />
          {{ curDoc.author.nickname }}
        </router-link>
        <span class="info m-l-16">
          <i class="el-icon-time"></i>
          <timeago2 :date-time="curDoc.created_at" timeago="none" />
        </span>
        <span class="m-l-30">
          <span
            v-if="curUser.id && !titleEditing"
            @click="titleEditing = true"
            class="link el-link--primary m-r-16">
            重命名
          </span>
          <span class="link el-link--primary" @click.stop="download">下载</span>
          <delete-link
            v-if="isWebAdmin || isSpaceOwner || isSpaceAdmin || isDocAuthor"
            :delete-item="curDoc"
            class="m-l-5"
            @deletedResource="deleted"
          />
        </span>
      </p>
      <edit-tags class="m-b-10" />
      <template v-if="curDoc.key">
        <yozo-preview :file="curDoc" />
      </template>
      <div class="m-t-16 flex flex-wrap">
        <vote-like :doc="curDoc" @voted="setCurDoc" />
        <vote-dislike :doc="curDoc" @voted="setCurDoc" />
        <span class="m-x-16"></span>
        <el-button type="primary" size="mini" icon="el-icon-edit" @click="commenting = !commenting">
          跟帖
        </el-button>
        <vote-collect :doc="curDoc" @voted="setCurDoc" />
        <mark-good-button v-if="isWebAdmin || isSpaceOwner || isSpaceAdmin" class="m-l-30" />
        <w-x-share
          type="ProductFile"
          :id="curDoc.id"
          page="pages/document/index"
          :scene="`${curDoc.space.id}-${curDoc.id}`"
          :share-url="curDoc.wxShare"
          class="m-l-10"
        />
      </div>
      <docs-comments :commenting.sync="commenting" />
    </template>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { formatUpload } from '@/components/spaces/resources-v2/format';
import DocBreadcrumb from '@/components/spaces/resources-v2/breadcrumb';
import EditTitle from '@/views/documents/components/edit-title';
import EditTags from '@/views/documents/components/edit-tags';
import DeleteLink from '@/components/spaces/resources-v2/delete-link';
import YozoPreview from '@/components/yozo-preview';
import DocsComments from '@/components/documents-follow-comments';
import VoteLike from '@/views/documents/components/vote-like';
import VoteDislike from '@/views/documents/components/vote-dislike';
import VoteCollect from '@/views/documents/components/vote-collection';
import MarkGoodButton from '@/views/documents/components/mark-good-button';
import WXShare from '@/components/wx-share-code';

export default {
  name: 'DocumentsUploadsShow', // 显示上传文件的组件
  components: {
    DocBreadcrumb,
    EditTitle,
    EditTags,
    DeleteLink,
    YozoPreview,
    VoteLike,
    VoteDislike,
    VoteCollect,
    MarkGoodButton,
    DocsComments,
    WXShare,
  },
  data() {
    return {
      loading: false,
      titleEditing: false,
      commenting: false,
    };
  },
  computed: {
    ...mapState({
      curDoc: 'currentDocument',
      curUser: 'currentUser',
    }),
    ...mapGetters(['isWebAdmin', 'isSpaceOwner', 'isSpaceAdmin', 'isDocAuthor']),
    loadUploadParams() {
      return {
        spaceId: this.$route.params.spaceId,
        docId: this.$route.params.docId,
      };
    },
  },
  created() { this.loadUpload(); },
  destroyed() { this.setCurDoc(); },
  methods: {
    ...mapActions({ setCurDoc: 'setCurrentDocument' }),
    // 加载本上传文件信息
    loadUpload() {
      this.loading = true;
      this.$api.spaceResources.show(this.loadUploadParams)
        .then(res => this.setCurDoc(formatUpload(res.data)))
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    // download
    download() {
      this.$api.other.download({ key: this.curDoc.key, curFileId: this.curDoc.id })
        .then((res) => {
          window.open(`${res.data.ufile}?attname=${this.curDoc.title}${res.data.ext}`, '_self');
        })
        .catch(() => {});
    },
    deleted() {
      if (window.history.length > 1) this.goBack(); // 当不是从新页面打开本页面时，返回上一页
      else {
        const folderIdTitle = (this.curDoc.parentPath || '').split('/').pop();
        const folderId = folderIdTitle.substring(0, folderIdTitle.indexOf('-'));
        const path = `/spaces/${this.curDoc.space.id}/resources`;
        this.$router.push(folderId ? `${path}/${folderId}` : path);
      }
    },
  },
  watch: {
    loadUploadParams() {
      this.setCurDoc();
      this.loadUpload();
    },
  },
};
</script>

<style></style>
